<#include '../header.ftl'>

<link rel="stylesheet" href="/css/login.css" >

<style>
    body {
        background-color: rgb(242, 242, 242);
    }

    @media screen and (max-width: 768px) {

    }
</style>

<main class="layadmin-user-login layadmin-user-display-show" style="padding-top: 70px">
    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header cc_cursor">
            <h2>绑定新用户</h2>
            <p>创客实验室——成果管理系统</p>
        </div>
        <form class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <input type="hidden" name="flag" value="false">
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="login-username"></label>
                <input type="text" name="username" id="login-username" lay-verify="required" placeholder="用户名"
                       class="layui-input" value="">
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="login-password"></label>
                <input type="password" name="password" id="login-password" lay-verify="required" placeholder="密码"
                       class="layui-input" value="">
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="login-check-password"></label>
                <input type="password" name="checkPassword" id="login-check-password" lay-verify="required" placeholder="确认密码"
                       class="layui-input" value="">
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-user" for="login-real-name"></label>
                <input type="text" name="realName" id="login-real-name" lay-verify="required" placeholder="真实姓名"
                       class="layui-input" value="">
            </div>
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-xs7">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="login-code"></label>
                        <input type="text" name="verificationCode" id="login-code" lay-verify="required" placeholder="图形验证码" class="layui-input">
                    </div>
                    <div class="layui-col-xs5">
                        <div style="margin-left: 10px;">
                            <img src="/verifycode/get" class="layadmin-user-login-codeimg" id="codeImg">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn  layui-btn-normal layui-btn-fluid" lay-submit lay-filter="login-submit">登 录</button>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" id="login">已有用户？返回登录</button>
            </div>
        </form>
    </div>
    <div class="layui-trans layadmin-user-login-footer">
        <p>© 2020 成果管理系统</p>
    </div>

    <script type="text/javascript">
        layui.use(['element', 'form', 'layer'], function () {
            const element = layui.element
                , form = layui.form
                , layer = layui.layer;
            form.render();

            form.on('submit(login-submit)', function (obj) {
                const loadIndex = layer.load();
                $.post('/qqbind', obj.field, function (res) {
                    layer.close(loadIndex)
                    if (res.success) {
                        layer.msg('绑定成功！');
                        window.location.href = '/'
                    } else {
                        layer.msg(res.msg);
                        $('#codeImg').click()
                        $('input[name="verificationCode"]').val('')
                    }
                })
                return false;
            });

            $('#login').click(() => {
                $.get("/binding", function () {
                    window.location.href = "/binding"
                })
            })

            $('#codeImg').click(function(){
                this.src = '/verifycode/get?date='+ new Date().getTime();
            }).click().show();

        })
    </script>

</main>
</body>
</html>